<template>
	<view class="app-container">
		<!-- CSS Confetti Effect -->
		<view class="confetti-container" v-if="showConfetti">
			<view
				v-for="(item, index) in confettiPieces"
				:key="index"
				class="confetti-piece"
				:style="{
					left: item.left,
					backgroundColor: item.color,
					animationDuration: item.duration,
					animationDelay: item.delay
				}"
			></view>
		</view>

		<!-- 动态粒子背景 -->
		<view id="particles-js"></view>
		
		<!-- 顶部信息 -->
		<view class="app-header">
			<text class="title">心动时刻</text>
			<view class="chances-counter">
				剩余次数: <text>{{ chancesCount }}</text>
			</view>
		</view>

		<!-- 主内容区 -->
		<view class="app-main">
			<!-- 初始能量球 -->
			<view class="main-view" :class="{'is-visible': !carouselVisible && chancesCount > 0}">
				<view class="orb-container" @click="handleOrbClick">
					<view class="orb">
						<view class="orb-core"><text class="orb-text">?</text></view>
						<view class="orb-ring"></view>
						<view class="orb-ring"></view>
						<view class="orb-ring"></view>
					</view>
				</view>
				<text class="prompt-text">点击开启你的今日缘分</text>
			</view>

			<!-- 轮播区域 -->
			<view id="carousel-container" class="main-view" :class="{'is-visible': carouselVisible}">
				<view class="carousel-window">
					<view id="carousel-track" :style="trackStyles" :animation="animationData">
						<view class="carousel-item" v-for="(item, idx) in carouselItems" :key="idx" :class="{ highlight: idx === winningIndex }">
							<image :src="item.avatarUrl" class="avatar" mode="aspectFill"></image>
							<text class="nickname">{{ item.nickname }}</text>
						</view>
					</view>
				</view>
				<view class="carousel-pointer" :class="{ spinning: isSpinning }"></view>
			</view>

			<!-- 无次数提示 -->
			<view class="fallback-container main-view" :class="{'is-visible': noChances}">
				<text class="h2">今日次数已用完</text>
				<text class="p">缘分需要耐心，明天再来探索吧！</text>
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="app-footer">
			<view class="nav-item active">🏠<text>首页</text></view>
			<view class="nav-item">💬<text>消息</text></view>
			<view class="nav-item">💖<text>发现</text></view>
			<view class="nav-item">👤<text>我的</text></view>
		</view>

		<!-- 结果展示弹窗 -->
		<view class="modal-overlay" :class="{visible: modalVisible}" @touchmove.stop.prevent>
			<view class="modal-content">
				<text class="close-button" @click="closeModal">&times;</text>
				<view class="card" v-if="selectedProfile">
					<view class="card-header">
						<image :src="selectedProfile.avatarUrl" id="avatar" mode="aspectFill"></image>
						<view class="user-info">
							<text class="h2 nickname">{{ selectedProfile.nickname }}</text>
							<view class="basic-info">
								<text>{{ selectedProfile.age }}岁 {{ selectedProfile.gender }}</text>
							</view>
						</view>
					</view>
					<view class="card-body">
						<text class="h3">个人简介</text>
						<text class="p self-introduction">{{ selectedProfile.selfIntroduction }}</text>
						<text class="h3">基本信息</text>
						<view class="tags">
							<text class="tag">{{ selectedProfile.height }}cm</text>
							<text class="tag">{{ selectedProfile.occupation }}</text>
							<text class="tag">{{ selectedProfile.education }}</text>
							<text class="tag">{{ selectedProfile.hometown }}</text>
						</view>
					</view>
					<view class="card-footer">
						<button @click="closeModal" class="footer-button secondary">忽略</button>
						<button @click="closeModal" class="footer-button primary">打个招呼 👋</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 撒花效果的画布 -->
		<canvas canvas-id="confetti-canvas" id="confetti-canvas" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1001;"></canvas>
	</view>
</template>

<script>
export default {
	data() {
		return {
			chancesCount: 3,
			isSpinning: false,
			modalVisible: false,
			carouselVisible: false,
			selectedProfile: null,
			carouselItems: [],
			winningIndex: -1,
			animationData: {},
			itemWidth: 0, 
			windowWidth: 0,
			showConfetti: false,
			confettiPieces: [],
			usersData: [
				{ "nickname": "艾米丽", "avatarUrl": "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=100&q=80", "gender": "♀", "age": 28, "hometown": "上海", "selfIntroduction": "热爱艺术和旅行，希望找到一个有趣的灵魂伴侣。", "height": 165, "education": "硕士", "occupation": "设计师" },
				{ "nickname": "杰克", "avatarUrl": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100&q=80", "gender": "♂", "age": 31, "hometown": "北京", "selfIntroduction": "喜欢健身和看电影，性格稳重，有责任心。", "height": 180, "education": "本科", "occupation": "产品经理" },
				{ "nickname": "苏菲", "avatarUrl": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=100&q=80", "gender": "♀", "age": 26, "hometown": "广州", "selfIntroduction": "美食爱好者，喜欢探索城市里的小众餐厅。", "height": 162, "education": "本科", "occupation": "市场专员" },
				{ "nickname": "戴维", "avatarUrl": "https://wza-1359813645.cos.ap-beijing.myqcloud.com/images/2025/05/23/107_20250523151049A001.jpg", "gender": "♂", "age": 32, "hometown": "河北邢台", "selfIntroduction": "性格开朗，喜欢户外运动，热爱生活。工作稳定，有上进心。", "height": 178, "education": "本科", "occupation": "软件工程师" },
				{ "nickname": "莉莉", "avatarUrl": "https://images.unsplash.com/photo-1610276198568-eb6d0ff53e48?auto=format&fit=crop&w=100&q=80", "gender": "♀", "age": 29, "hometown": "杭州", "selfIntroduction": "爱猫人士，喜欢宅家看剧，也喜欢偶尔的city walk。", "height": 168, "education": "本科", "occupation": "运营" },
				{ "nickname": "汤姆", "avatarUrl": "https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?auto=format&fit=crop&w=100&q=80", "gender": "♂", "age": 35, "hometown": "深圳", "selfIntroduction": "创业者，工作狂，但懂得享受生活。", "height": 175, "education": "博士", "occupation": "公司创始人" },
				{ "nickname": "格蕾丝", "avatarUrl": "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=100&q=80", "gender": "♀", "age": 27, "hometown": "成都", "selfIntroduction": "无辣不欢，喜欢热闹，朋友们都说我是个小太阳。", "height": 166, "education": "本科", "occupation": "教师" },
				{ "nickname": "山姆", "avatarUrl": "https://images.unsplash.com/photo-1557862921-37829c790f19?auto=format&fit=crop&w=100&q=80", "gender": "♂", "age": 30, "hometown": "重庆", "selfIntroduction": "摄影师，用镜头记录生活的美好。", "height": 182, "education": "大专", "occupation": "自由职业" }
			]
		};
	},
	computed: {
		noChances() {
			return this.chancesCount <= 0;
		}
	},
	onReady() {
		this.populateCarousel();
		this.initLayout();
	},
	methods: {
		initLayout() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.carousel-item').boundingClientRect();
			query.select('.carousel-window').boundingClientRect();
			query.exec(res => {
				if (res && res[0] && res[1]) {
					this.itemWidth = res[0].width + (parseInt(res[0].left) * 0.1); 
					this.windowWidth = res[1].width;
				}
			});
		},
		handleOrbClick() {
			if (this.noChances || this.isSpinning) return;
			this.chancesCount--;
			this.carouselVisible = true;
			this.spinCarousel();
		},
		populateCarousel() {
			const baseItems = [...this.usersData];
			let items = [];
			for (let i = 0; i < 50; i++) {
				items.push(baseItems[i % baseItems.length]);
			}
			for (let i = items.length - 1; i > 0; i--) {
				const j = Math.floor(Math.random() * (i + 1));
				[items[i], items[j]] = [items[j], items[i]];
			}
			this.carouselItems = items;
		},
		spinCarousel() {
			this.isSpinning = true;
			const winningIndex = Math.floor(Math.random() * (this.carouselItems.length - 10)) + 5;
			this.winningIndex = winningIndex;
			this.selectedProfile = this.carouselItems[winningIndex];

			const offset = (this.windowWidth / 2) - (this.itemWidth / 2);
			const finalPosition = -(winningIndex * this.itemWidth - offset);
			
			const animation = uni.createAnimation({
				duration: 6000,
				timingFunction: 'cubic-bezier(0.2, 0.8, 0.25, 1)',
			});
			animation.translateX(finalPosition).step();
			
			this.animationData = animation.export();

			setTimeout(() => {
				this.isSpinning = false;
				this.modalVisible = true;
				this.triggerConfetti(); // Fire confetti
			}, 6000);
		},
		closeModal() {
			this.modalVisible = false;
			this.winningIndex = -1;
			setTimeout(() => {
				this.carouselVisible = false;
				this.populateCarousel();
			}, 500);
		},
		triggerConfetti() {
			const pieces = [];
			const colors = ['#00f2ff', '#ff00c1', '#ffffff', '#ffeb3b'];
			for (let i = 0; i < 100; i++) {
				pieces.push({
					left: `${Math.random() * 100}%`,
					duration: `${Math.random() * 2 + 3}s`, // 3-5 seconds
					delay: `${Math.random() * 2}s`, // 0-2 seconds delay
					color: colors[Math.floor(Math.random() * colors.length)]
				});
			}
			this.confettiPieces = pieces;
			this.showConfetti = true;
			// Automatically hide after a while
			setTimeout(() => {
				this.showConfetti = false;
				this.confettiPieces = [];
			}, 7000); // Should be longer than max duration + max delay
		}
	}
};
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Orbitron:wght@500;700&display=swap');

:root {
    --primary-color: #00f2ff;
    --secondary-color: #ff00c1;
    --background-color: #0a0a14;
    --card-background: rgba(10, 16, 30, 0.85);
    --text-color: #e0e0e0;
    --shadow-color: rgba(0, 242, 255, 0.6);
    --border-color: rgba(0, 242, 255, 0.25);
    --footer-bg: rgba(10, 10, 20, 0.8);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background: #000;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px 0;
}

#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.app-container {
    width: 375px;
    height: 812px;
    background-color: var(--background-color);
    background-image: 
        linear-gradient(rgba(0, 242, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: moveGrid 10s linear infinite;
    border-radius: 40px;
    box-shadow: 0 0 60px rgba(0,0,0,0.7), 0 0 20px var(--shadow-color) inset;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app-header, .app-main, .app-footer {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 10px;
    font-family: 'Orbitron', sans-serif;
}

.app-header .title {
    font-size: 28px;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 10px var(--shadow-color);
}

.chances-counter {
    background: var(--border-color);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    border: 1px solid var(--primary-color);
}

.app-main {
    flex-grow: 1;
    position: relative; /* 定位上下文 */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 视图容器 --- */
.main-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.main-view.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* --- 能量球 --- */
#blind-box {
    cursor: pointer;
}
.orb-container {
    perspective: 1000px;
    margin: 30px 0;
}
.orb {
    width: 180px;
    height: 180px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}
.orb:hover { transform: scale(1.1); }
.orb-core {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-color) 0%, var(--background-color) 70%);
    box-shadow: 0 0 30px var(--shadow-color), 0 0 60px var(--secondary-color) inset;
    display: flex; justify-content: center; align-items: center;
    font-size: 80px; color: white; text-shadow: 0 0 15px white;
    font-family: 'Orbitron', sans-serif;
}
.orb-ring {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%; border: 2px solid;
    border-color: var(--primary-color) transparent;
    animation: rotate 4s linear infinite;
}
.orb-ring:nth-child(2) {
    transform: rotateY(70deg); animation-delay: -0.5s;
    border-color: var(--secondary-color) transparent;
}
.orb-ring:nth-child(3) {
    transform: rotateX(70deg); animation-delay: -1s;
}
.prompt-text {
    font-size: 18px; color: var(--text-color);
    text-shadow: 0 0 8px var(--shadow-color);
    animation: pulse 2s infinite;
    font-family: 'Orbitron', sans-serif;
}

/* --- 轮播组件 --- */
#carousel-container {
    position: relative;
    width: 100%;
    margin: 30px auto;
    overflow: hidden;
}
.carousel-window {
    width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}
#carousel-track {
    display: flex;
    height: 100%;
    position: relative;
}
.carousel-item {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.5s ease;
    overflow: hidden;
}
.carousel-item image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
    border: 2px solid var(--primary-color);
    filter: blur(4px);
    transition: filter 0.5s ease;
}
.carousel-item.highlight image { filter: blur(0); }
.carousel-item.highlight {
    border-color: var(--primary-color);
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--shadow-color);
}
.carousel-item .nickname {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--text-color);
}
.carousel-pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border: 3px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 0 15px var(--shadow-color), inset 0 0 15px var(--shadow-color);
    z-index: 2;
}

#carousel-container.spinning .carousel-pointer {
    animation: pulse-glow 1.5s infinite;
}

/* --- 无次数提示 --- */
.fallback-container .h2 { font-size: 24px; margin-bottom: 10px; text-shadow: 0 0 10px var(--shadow-color); }
.fallback-container .p { font-size: 16px; opacity: 0.8; }

/* --- 弹窗 --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1000;
}
.modal-overlay.visible { opacity: 1; visibility: visible; }
.modal-content {
    background: var(--card-background);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 0 40px var(--shadow-color);
    position: relative;
    width: 340px;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}
.modal-overlay.visible .modal-content {
    transform: translateY(0);
    animation: modal-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 28px;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 2;
}
.close-button:hover { transform: scale(1.1) rotate(90deg); }

/* --- 卡片通用样式 --- */
.card {
    background-color: transparent;
    color: var(--text-color);
    border-radius: 15px;
    width: 100%;
    font-family: 'Roboto', sans-serif;
}

.card-header {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}
#avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid var(--primary-color);
    margin-right: 15px;
    object-fit: cover;
}
.user-info .h2 { font-size: 24px; margin: 0; font-family: 'Orbitron', sans-serif;}
.basic-info .age-gender {
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 13px;
}
.card-body { padding: 20px 0; }
.card-body .h3 {
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}
.card-body .p { line-height: 1.6; font-size: 15px; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.tags .tag {
    background: var(--border-color);
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 14px;
    border: 1px solid transparent;
}
.card-footer { 
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    gap: 15px;
}
.footer-button {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.footer-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
.footer-button.secondary {
    background-color: rgba(255,255,255,0.1);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.footer-button.secondary:hover {
    background-color: rgba(255,255,255,0.2);
    border-color: var(--primary-color);
}
.footer-button.primary {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 0 15px var(--secondary-color);
}
.footer-button.primary:hover {
    box-shadow: 0 0 25px var(--secondary-color), 0 0 10px var(--primary-color);
}


/* 撒花效果 */
#confetti-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1001;
}

.app-footer {
    padding-top: 10px;
    padding-bottom: 20px; /* For iPhone-like bottom bar */
    display: flex;
    justify-content: space-around;
    background-color: var(--footer-bg);
    backdrop-filter: blur(5px);
    border-top: 1px solid var(--border-color);
}
.nav-item {
    display: flex; flex-direction: column; align-items: center;
    font-size: 24px;
    color: #888;
    cursor: pointer;
}
.nav-item span { font-size: 12px; margin-top: 4px; }
.nav-item:hover, .nav-item.active {
    color: var(--primary-color);
    text-shadow: 0 0 10px var(--primary-color);
}


@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes moveGrid { from { background-position: 0 0; } to { background-position: 30px 30px; } }
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.98); }
}
@keyframes modal-pop-in {
    from { transform: translateY(20px) scale(0.9); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes pulse-glow {
    0% { box-shadow: 0 0 15px var(--shadow-color), inset 0 0 15px var(--shadow-color); }
    50% { box-shadow: 0 0 25px var(--shadow-color), inset 0 0 25px var(--shadow-color); }
    100% { box-shadow: 0 0 15px var(--shadow-color), inset 0 0 15px var(--shadow-color); }
}

@keyframes spin-end {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1440deg); /* 4 full spins */
  }
}

/* --- CSS Confetti --- */
.confetti-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9999;
	overflow: hidden;
}

.confetti-piece {
	position: absolute;
	width: 10px;
	height: 20px;
	background-color: #f00; /* Will be overridden by inline style */
	top: -20px;
	animation-name: confetti-fall;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

@keyframes confetti-fall {
	0% {
		transform: translateY(0) rotateZ(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(100vh) rotateZ(720deg);
		opacity: 0;
	}
}
</style> 